@smui/line-ripple

Svelte Material UI - Line Ripple

Line ripples are used to highlight input elements above them.

See MDC Line Ripple for more information on API and Sass mixins.

Installation

You won't generally need to install this package, unless you're manually creating text fields.

npm install --save-dev @smui/line-ripple

Basic Usage

<script>
  import Textfield, {Input} from '@smui/textfield';
  import FloatingLabel from '@smui/floating-label';
  import LineRipple from '@smui/line-ripple';

  let name = '';
</script>

<!--
  Normally you wouldn't provide a line ripple, but you can manually set up a
  textfield like this:
-->
<Textfield>
  <Input bind:value={name} id="name-input" />
  <FloatingLabel for="name-input">Name</FloatingLabel>
  <LineRipple />
</Textfield>

Demo

in action: https://sveltematerialui.com/demo/textfield

demo code: https://github.com/hperrin/svelte-material-ui/blob/master/site/src/routes/demo/textfield.svelte

Exports

todo...

Changelog

2.0.0-beta.1 (2021-03-27)

Features

• forward blur and focus from other inputs (6059f87)